<template>
  <div class="program-detail">
    <!-- tab标签页 -->
    <a-tabs
      default-active-key="1"
      @change="callback"
      :tabBarGutter="30"
      size="large"
    >
      <a-tab-pane key="1" tab="项目实时进度"> </a-tab-pane>
      <a-tab-pane key="2" tab="项目概览" force-render>
        <!-- <a-empty :description="false" style="margin: 100px 0">
          暂无项目概览
        </a-empty> -->
      </a-tab-pane>
      <a-tab-pane key="3" tab="项目情况" force-render> </a-tab-pane>
    </a-tabs>

    <!-- 右边下拉菜单 -->
    <div class="select-menu">
      <a-dropdown>
        <span class="el-dropdown-link" style="cursor: pointer:color:#333333;font-size:18px;">
          2019<i class="el-icon-arrow-down el-icon--right" style="color:#333333;"></i>
        </span>
        <template v-slot:overlay>
          <a-menu>
            <a-menu-item>
              <a href="javascript:;">2020年</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">2021年</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">2022年</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>

    <!-- 季度筛选 -->
    <div style="margin-top: 10px">
      <a-space :size="60">
        <div class="jidu">
          <div
            @click="activeQuarterlyIndex = 1"
            :class="[
              activeQuarterlyIndex == 1 ? 'time-jidu-actice' : 'time-jidu',
            ]"
          >
            总览
          </div>
          <div class="not-info">暂无内容</div>
        </div>
        <div
          class="jidu"
          v-for="index in 4"
          :key="index"
          @click="activeQuarterlyIndex = index + 1"
        >
          <div
            :class="[
              index + 1 == activeQuarterlyIndex
                ? 'time-jidu-actice '
                : 'time-jidu',
            ]"
          >
            {{ chnNumChar[index] }}季度
          </div>
          <div class="not-info" v-if="index % 4 == 3">暂无内容</div>
        </div>
      </a-space>
    </div>
    <a-divider />

    <!-- 项目实时计划 -->
    <program-do-plan />
    <!-- 项目文件 -->
    <program-doc />
    <!-- 历史记录 -->
    <program-his />
  </div>
</template>

<script>
import ProgramDoPlan from "./components/program-do-plan";
import ProgramDoc from "./components/program-doc";
import ProgramHis from "./components/program-his";
export default {
  components: {
    ProgramDoPlan,
    ProgramDoc,
    ProgramHis,
  },
  data() {
    return {
      activeQuarterlyIndex: 1,
      chnNumChar: ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"],
    };
  },
  created() {
    console.log(this.$route);
  },
};
</script>

<style lang="less" scoped>
.program-detail {
  position: relative;
  .select-menu {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .jidu {
    position: relative;
    .time-jidu {
      background-color: #fff;
      color: #333333;
      font-size: 16px;
      padding: 5px 10px;
      cursor: pointer;
    }
    .time-jidu-actice {
      background-color: #00796a;
      color: #fff;
      font-size: 16px;
      padding: 5px 10px;
      cursor: pointer;
      box-shadow: 1px 1px 5px 1px #cae4e0;
    }
    .not-info {
      position: absolute;
      top: -16px;
      right: -200px;
      color: #e62929;
      width: 200px;
      font-size: 12px;
    }
  }
}
</style>